<template>
  <div>
    <section>
      <div class="flex">
        <t-toggle v-model="isEditable" label="可编辑"></t-toggle>
        <t-toggle v-model="enableComment" label="可批注"></t-toggle>
        <t-toggle v-model="outlineVisible" label="目录显隐"></t-toggle>
        <t-toggle v-model="enableAi" label="AI"></t-toggle>
        <t-toggle v-model="enableAiReference" label="添加参考"></t-toggle>

        <t-button class="q-ml-md btn-fixed-width" color="primary" label="Save & Show" @click="onSave"></t-button>
        <t-input v-model="aiRole" :disable="!enableAi"></t-input>

        <div v-if="false" class="q-ml-md" style="font-size: 16px">
            <label for="" class="q-mr-sm">目录位置</label>
            <label>
                <input type="radio" checked name="position" value="left" @change="handlePositionChange" /> 左侧
            </label>
            <label>
                <input type="radio" name="position" value="top" @change="handlePositionChange" /> 顶部
            </label>
        </div>
      </div>
    </section>

    <hr>

    <t-advanced-editor
      ref="editor"
      :enableAi="enableAi"
      :enableAiReference="enableAiReference"
      :aiRole="aiRole"
      v-model="editorValue"
      :readonly="!isEditable"
      :enableComment="enableComment"
      v-model:outlineVisible="outlineVisible"
      :outlinePosition="outlinePosition"
      :outlineIncludeLevels="outlineIncludeLevels"
      :queryAllComments="queryAllComments"
      :commentDataSource="commentDataSource"
      minHeight='800px'
      @add-reference="onAddReference"
    ></t-advanced-editor>
  </div>
</template>

<script>
export default {
  name: 'EditorDemo',
}
</script>

<script setup>
import {ref} from 'vue'
// import { TAdvancedEditor, TToggle } from 't-design-vue-next'
const isEditable = ref(true)
const enableComment = ref(true)
const enableAi = ref(true)
const enableAiReference = ref(true)
const aiRole = ref(`你是资深技术文档工程师、IT专家精通所有研发阶段的各种文档设计和编写，拥有丰富的文档写作经验，对文档的结构、内容、格式、层级、标题、段落、图表、表格、公式、代码等方面都有深入的理解和掌握。`)
const outlineVisible = ref(false)
const outlinePosition = ref('left')
const outlineIncludeLevels = ref([1,2,3,4,5,6])
const editorValue = ref(`

<h1>特来电企业文化</h1>
<h2>目标：</h2>
<strong>打造政府放心、客户满意的中国最强最大充电网生态运营商。</strong>
<h2>使命：</h2>
<strong>实现新能源车充新能源电，让尾气和雾霾远离人类</strong>

<h2>价值观</h2>
<strong>以客户为中心，为其提供精致产品和优质服务
以价值创造者为本，让你我的理想成为现实</strong>


<h2>团队文化</h2>
<h3>团队目标：</h3>
<strong>打造一支凝聚力高、战斗力强、高素质、高绩效、勇担当的狼性正规军团队</strong>
<h3>团队原则：</h3>
<strong>是团队而不是舵手为企业领航，大家在一起心不累，愿意把后背交给团队</strong>
<h3>团队标准：</h3>
<strong>忠诚、勇担当，干净、守底线</strong>
<h3>团队精神：</h3>
<strong>特别能吃苦、特别能战斗、强强融合、优势互补、相互成就、互相添彩</strong>


<h2>分享文化</h2>
<h3>增利分享目标：</h3>
<strong>打造利益共同体和命运共同体，成就人生价值</strong>
<h3>增利分享原则：</h3>
<strong>大平台、小组织；先增利、再分享；无价值、不分享</strong>
<h3>分享形式：</h3>
<strong>事业合伙特来劲；增利分享特来钱；战友家人特温暖；幸福人生特来电</strong>

<h2>创新文化</h2>
<h3>创新理念：</h3>
<strong>不是市场需要什么，我们就开发什么，而是我们创新什么，市场就需要什么</strong>
<h3>创新目标：</h3>
<strong>用创新团队的前瞻性，建立一步领先、步步领先的创新战略体系，铸就超越竞争的核心能力，引领行业和产业向纵深发展</strong>
<h3>创新认知：</h3>
<ul>
  <li><strong>创新要开天眼，洞悉本质、看别人看不到的</strong></li>
  <li><strong>研发要开天路，敢为人先、想别人想不到的</strong></li>
  <li><strong>技术要开天窗，跨界融合、干别人干不到的</strong></li>
</ul>

<hr>


<p>图片
  <img src="https://placehold.co/300x200/orange/white">
</p>


<p>视频
  <video controls="controls" width="350" class="resize-obj" jm_neat="1455058946" src="https://resource.teld.org/telddoc/101/screenshot20250123105902.mp4">
    <source src="https://resource.teld.org/telddoc/101/screenshot20250123105902.mp4">
  </video>
</p>

<div>
  <span videoWrapper controls="controls" width="350" class="resize-obj" jm_neat="1455058946" src="https://resource.teld.org/telddoc/101/screenshot20250123105902.mp4">
    <source src="https://resource.teld.org/telddoc/101/screenshot20250123105902.mp4">
  </span>
</div>
`)

const onSave = () => {
  console.log('onSave', editorValue.value)
  var temp = editorValue.value
  editorValue.value = ''
  setTimeout(() => {
    editorValue.value = temp
  }, 1200);
}

const editor = ref(null)

const queryAllComments = async () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([])
    }, 600)
  })
}
const commentDataSource = 'commentDataSource'

const handlePositionChange = (e) => {
  console.log('Selected position: ',e.target.value);
  outlinePosition.value = e.target.value
}

/**
 * 添加参考
 * @param {Function} cb 回调函数
 */
const onAddReference = (cb) => {
  cb([
    {
      title: '<h2>团队目标</h2>',
      content: `团队目标：
打造一支凝聚力高、战斗力强、高素质、高绩效、勇担当的狼性正规军团队`,
      link: `https://fas.teld.org/gencode/fas/Page_Browse?IsPutAwayTree=true&TabName=%E6%B5%8F%E8%A7%88&DocID=a4f1d53f-aa9b-4495-b902-11e8de24a5ae&DocChapterID=78C66AD3-2DFB-47F8-B4A3-485F0428E58A&FileTypeID=5D5618B7-FE48-4BA5-BAE5-4416EBBEE8FF&IsPageBrowse=true&IsFolder=false`,
    },
    {
      title: '团队原则',
      content: `团队原则：
是团队而不是舵手为企业领航，大家在一起心不累，愿意把后背交给团队`,
      link: `https://fas.teld.org/gencode/fas/Page_Browse?IsPutAwayTree=true&TabName=%E6%B5%8F%E8%A7%88&DocID=0cebb40b-0067-4104-9083-39d29ff6b7d5&DocChapterID=3BBD4492-44D5-4133-BC67-5CD4767175B0&FileTypeID=6F62470F-2BC9-4002-AA18-F33CBB246111&IsPageBrowse=true&IsFolder=false`,
    },
    {
      title: '"团队精神"',
      content: `<h2>团队精神</h2>：
<p>特别能吃苦、特别能战斗、强强融合、优势互补、相互成就、互相添彩</p>`
    },
  ])
}

</script>

<style>
.aie-container {
  height: 560px;
}
</style>
